<template>
	<view class="budgetSheet">
		<hx-navbar ref="hxnb" :config="config" />
		<view class="budget">
			<view class="flex" style="line-height: 54rpx;">
				<text style="font-size: 32rpx;">雇佣押金(元)</text>
				<text
					style="font-family: Rubik-Regular, Rubik;font-size: 44rpx;margin-left: 60rpx;">{{quotationData.estimateAmount}}</text>
			</view>
			<view class="flex"
				style="padding-bottom: 40rpx;line-height: 54rpx;margin: 24rpx 0;border-bottom: 1rpx solid rgba(30,30,30,0.1);">
				<text style="font-size: 32rpx;">产品清单</text>
				<text style="margin-left: 60rpx;">{{quotationData.productList}}</text>
			</view>
			<view class="flex"
				style="padding-bottom: 40rpx;line-height: 54rpx;margin: 24rpx 0;border-bottom: 1rpx solid rgba(30,30,30,0.1);">
				<text style="font-size: 32rpx;">项目名称</text>
				<text style="margin-left: 60rpx;">{{quotationData.projectName}}</text>
			</view>
			<view class="flex" style="justify-content: space-between;margin-top: 40rpx;">
				<h4 style="font-size: 36rpx;">报价明细表</h4>
				<view class="flex" style="align-items: center;">
					<image style="width: 48rpx;height: 48rpx;" src="../../static/search.png" mode=""></image>
					<text style="font-weight: 500;color: #009BFF;" @tap="open(quotationData.attachmentUrl)">立即查看</text>
				</view>
			</view>

		</view>
		<view class="payType flex" style="align-items: center;" v-if="type!=1">
			<text style="font-weight: 500;">支付方式</text>
			<view class="flex" style="align-items: center;">
				<image style="width: 64rpx;height: 64rpx;" src="../../../static/me/8022.png" mode=""></image>
				<text style="font-size: 36rpx;margin: 0 10rpx; ">支付宝支付</text>
				<image style="width: 60rpx;height: 60rpx;" src="../../static/2068.png" mode=""></image>
			</view>
		</view>
		<view class="pay">
			<view class="flex" style="align-items: center;" v-if="type!=1">
				<image :src="'../../../static/' + (isAgree ? 'check' : 'nocheck') + '.png'" @click="isAgree = !isAgree"
					style="height: 44rpx;width: 44rpx;margin-right: 10rpx;border-radius: 50%;"></image>
				同意报价，并同意
				<view @click="$tools.goPageNoAuth('/pages/common/user_protocol')">“共厂家居用户协议”
				</view>
			</view>
			<view class="pay_money" v-if="type==1">
				{{fles}}
			</view>

			<view v-if="type==4" class="flex align-center" style="background-color: #FFFFFF;">
				<view class="pay_money" style="width: 300rpx;" @click="pig()">
					{{owner}}
				</view>
				<view class="pay_money" style="width: 300rpx;margin-left: 10rpx;" @click="payment()"
					v-if="this.quotationData.hasFirstFree==1 && (this.pay==3  || this.pay == 4) ">
					暂不支付
				</view>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<!-- 		<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
			<scroll-view scroll-y="true" style="padding: 0 30rpx 30rpx 30rpx;background-color: #fff;height: 752rpx;">
				<view class="flex">
					<view class="">

					</view>

				</view>
			</scroll-view>
		</uni-popup> -->
		<!-- 温馨提示 -->
		<!-- 		<uni-popup id="pay" ref="pay" type="center" :animation="true">
			<view class="prompt">
				<view class="flex">
					<h3 style="text-align: center;margin: 30rpx auto 56rpx;">温馨提示</h3>
					<view @click="close()" class="quxiao" style="justify-content: right;"></view>
				</view>
				<view style="line-height: 40rpx;text-align: center;font-size: 32rpx;">
					注意：检查到您的订单未指派安装师傅，如需要安装师傅，请与设计师联系或自行指派，如不需要，请在支付尾款时，选择不需要安装师傅。
				</view>
				<view class="flex" style="align-items: center;justify-content: center;margin: 60rpx 0;">
					<image :src="'../../../static/' + (isInstallation ? 'check' : 'nocheck') + '.png'"
						@click="isInstallation = !isInstallation"
						style="height: 44rpx;width: 44rpx;margin-right: 10rpx;border-radius: 50%;"></image>
					已有安装师傅
				</view>
				<view class="verify">
					确定
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 协议同意
				isAgree: false,
				// 安装师傅
				isInstallation: false,
				config: {
					title: "预算单"
				},
				quotationData: {},
				pay: '',
				fles: '',
				foolow: {
					1: '已支付',
					2: '未支付',
					3: '最近有一笔订单',
					4: '此页面订单'
				},
				type: null,
				owner: ''
			}
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
			this.id = e.data
			this.quotationDetail(e.data)
		},
		methods: {
			payment() {
				let data = {
					id: this.id
				}
				this.$api.subOrderBp(data).then((res) => {
					console.log(res, '达瓦大')
					if (res.data.code == 0) {
						this.$tools.showToast('设置成功')
						this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orders')
					}
				})
			},
			quotationDetail(e) {
				let data = {
					id: e
				}
				this.$api.quotationDetail(data).then((res) => {
					console.log(res, '订单')
					this.pay = res.data.result.payStatus
					this.quotationData = res.data.result.designerQuotation
					if (this.type == 1 && this.pay == 0) {
						this.fles = '对方未支付'
					} else if (this.type == 1 && this.pay == 1) {
						this.fles = '对方已支付'
					} else if (this.type == 1 && this.pay == 2) {
						this.fles = '项目已创建,暂未支付'
					} else if (this.type == 1 && this.pay == 2) {
						this.fles = '项目已创建,暂未支付'
					} else if (this.type == 4 && this.pay == 1) {
						this.owner = '已支付'
					} else if (this.type == 4 && (this.pay == 2 || this.pay == 3)) {
						this.owner = '立即支付'
					} else if (this.type == 4 && this.pay == 4) {
						this.$tools.showToast('最近一个月有订单,请核对订单选择是否继续', 5000)
					}
					console.log(this.quotationData, 'xczcz')
				})
			},
			pig() {
				let data = {
					id: this.id
				}
				if (!this.isAgree) {
					this.$tools.showToast('请勾选用户协议及隐私协议')
					return false;
				}
				// page/chat/orderPayFeeling
				this.$api.subOrder(data).then((res) => {
					if (res.data.code == 0) {
						let obj = {
							id: this.quotationData.id,
							orderNum: res.data.result,
							type: 1

						}
						this.$tools.goPageNoAuth('./orderPayFeeling?data=' + JSON.stringify(obj))
					} else {
						this.$tools.showToast(res.data.message)
					}
				})
			},
			close() {
				this.$refs.pay.close()
			},
			// 更换支付方式弹窗
			taggle() {
				this.$refs.popup.open()
			},
			CheckboxChange() {
				this.isAgree = this.isAgree ? false : true
			},
			/*
			打开文件 
			*/
			open(filePath) {
				let file = filePath
				let system = uni.getSystemInfoSync().platform;
				if (system == 'ios') {
					file = encodeURI(file);
				}
				uni.downloadFile({
					url: file,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	.verify {
		width: 304rpx;
		height: 86rpx;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 86rpx;
		text-align: center;
		margin: 30rpx auto 0;
	}

	.prompt {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 30rpx;
		height: 588rpx;
	}

	.quxiao {
		width: 68rpx;
		height: 68rpx;
		background-size: 100% 100%;
		background-image: url('../../static/7730.png');
	}

	.pay_money {
		background: #492D22;
		border-radius: 8rpx;
		font-size: 36rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 30rpx auto;
		text-align: center;
		width: 554rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.pay {
		background: #fff;
		position: fixed;
		bottom: 0;
		padding: 20rpx 30rpx;
		width: 100%;
	}

	.payType {
		justify-content: space-between;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		width: 690rpx;
		padding: 30rpx;
	}

	.budget {
		width: 690rpx;
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 40rpx 30rpx;
		background-color: #fff;
		background-size: 100% 100%;
		background-image: url('../../static/baomi.png');
	}
</style>